<template>
  <div class="paid">
    <div class="tools">
      <el-button v-on:click="handle1">找人代付</el-button>
      <el-button v-on:click="handle2">我的代付</el-button>
    </div>

    <!-- 找人代付 -->
    <div class="tabele1" v-if="show1">
      <el-row>
        <el-button @click="centerDialogVisible = true" type="primary" class="add">+&nbsp;添加代付信息</el-button>
      </el-row>
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="payCompanyName" label="指定代付公司名称" width="280"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="status" label="对方是否确认绑定" width="280">
          <template slot-scope="scope">
       
            <el-tag v-if="scope.row.status == 1" type="success" >已绑定</el-tag>
            <el-tag  v-if="scope.row.status == 0" type="danger">未绑定</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="绑定状态" width="180">
          <template slot-scope="scope">
           <el-tag v-if="scope.row.status == 1" type="success">已绑定</el-tag>
            <el-tag  v-if="scope.row.status == 0" type="danger">未绑定</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="操作" width="280">
          <template slot-scope="scope">
            <el-button @click="bj(scope.row)" type="text" v-if="scope.row.status == 1">编辑</el-button>
            <el-button @click="bc(scope.row)" type="text" v-if="scope.row.status == 0">保存</el-button>
            <el-button @click="de(scope.row)" type="text" v-if="scope.row.status == 1">删除</el-button>
            <el-button @click="qx(scope.row)" type="text" v-if="scope.row.status == 0">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 我的代付 -->
    <div class="tabele2" v-if="show2">
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column prop="companyName" label="需要代付公司名称" width="280"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="140"></el-table-column>
        <el-table-column label="是否确认绑定" width="200">
          <template>
            <el-select v-model="this.value">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="绑定状态" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">已绑定</span>
            <span v-if="scope.row.status == 0">未绑定</span>
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="操作" width="280">
          <template>
            <span class="keep">保存</span>
            <span class="cancel">取消</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框添加 -->
    <el-dialog title="添加代付信息" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form label-width="80px">
        <el-form-item label="企业名称">
          <el-input v-model="companyName"></el-input>
        </el-form-item>
        <el-form-item label="代付企业">
          <el-input v-model="payCompanyName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="adds">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="修改代付信息" :visible.sync="dialogFormVisible" width="30%" center>
      <el-form label-width="80px">
        <el-form-item label="企业名称">
          <el-input v-model="companyName"></el-input>
        </el-form-item>
        <el-form-item label="代付企业">
          <el-input v-model="payCompanyName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

 <script>
import { paymany, Mypaymany, addpaymany, binding, delet, edilr } from './paid'
import { getItem } from '@/utils/store.js'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      id: '',
      dialogFormVisible: false, //编辑弹窗
      companyName: getItem('USER_INFO').data.data.companyName,
      payCompanyName: '',

      centerDialogVisible: false, //弹窗
      userinfo: null, // 本地储存的userinfo
      show1: true,
      show2: false,

      tableData1: [], //找人代付
      tableData2: [], //我的代付
      options: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '2',
          label: '否',
        },
      ],
      value: '1',
    }
  },
  created() {
    this.userinfo = getItem('USER_INFO').data.data
    this.getuserpay() //找人代付
  },
  methods: {
    // 确定修改编辑
    async determine() {
      let list = {
        payCompanyName: this.payCompanyName,
        id: this.id,
      }
      const { data } = await edilr(list)
      if (data.code == 0) {
        Message.success('修改代付信息成功')
        this.dialogFormVisible = false
        this.getuserpay()
      }
      console.log(data)
    },
    async de(row) {
      //删除
      try {
        const data = await delet(row.id)
        console.log(data, '000000000')
        this.getuserpay()
      } catch (error) {
        console.log(error)
      }
    },
    //保存
    async bc(row) {
      let list = {
        id: row.id,
        status: 1,
      }
      await binding(list)
      this.getuserpay()
    },
    /* 取消 */
    async qx(row) {
      this.de(row)
      this.getuserpay()
    },
    /* 修改公司名称 */
    bj(row) {
      console.log(row, 111)
      this.id = row.id // 修改公司的id
      ;(this.payCompanyName = row.payCompanyName), (this.dialogFormVisible = true)
    },

    async adds() {
      this.centerDialogVisible = false
      let datas = {
        userId: this.userinfo.person.userId,
        companyId: this.userinfo.companyId,
        companyName: this.companyName,
        payCompanyName: this.payCompanyName,
      }
      try {
        const data = await addpaymany(datas)
        console.log(data, '新增')

        this.payCompanyName = ''
        if (data.data.code == 0) {
          Message.success('添加成功')
        }
        this.getuserpay() //刷新数据
      } catch (error) {
        console.log(error)
      }
    },
    cancel() {
      this.payCompanyName = ''
      this.centerDialogVisible = false
    },

    onSelectedDrug(value) {
      // select change事件
      console.log(value)
    },
    handle1: function () {
      this.show1 = true
      this.show2 = false
    },
    async handle2() {
      this.show1 = false
      this.show2 = true
      let ids = {
        //payCompanyId:this.tableData1.payCompanyId, //线上
        userId: this.userinfo.person.userId,
        payCompanyId: 1633, //数据展示写死1
        // userId: 1,
      }
      try {
        const { data } = await Mypaymany(ids) //我的代付
        if (data.code == 0) {
          Message.success('我的代付查询成功')
          this.tableData2 = data.data
          console.log(data, 999999)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getuserpay() {
      let ids = {
        userId: this.userinfo.person.userId, //动态获取
        companyId: this.userinfo.companyId,
        // userId: 1, // 数据展示写死
        // companyId: 1,
      }
      try {
        const { data } = await paymany(ids) //找人代付
        if (data.code == 0) {
          // 添加消息失败引入Message
          console.log(data, '找人代付')
          this.tableData1 = data.data
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less">
.else,
.mine {
  width: 100px;
  line-height: 40px;
  background-color: #fff;
  border: 2px solid rgb(247, 247, 247);
  border-radius: 10%;
}

.else {
  border-color: rgb(24, 174, 255);
}

.add {
  margin: 25px 0;
}

.keep,
.cancel {
  color: rgb(157, 157, 255);
  margin: 5px;
}
.tabele2 {
  margin-top: 30px;
}

// .tabele2{
//   //display: none;
// }
</style>